


<template>
    <!-- =====【告警统计页面】=====-->

    <div style="display: flex" class="tempxyz menmuStyle">
        <CCard class="rightCard">
            <CCardHeader class="header-wraper">
                <div class="header-left-titleWraper">
                    <span class="textTitle">告警统计</span>
                </div>
            </CCardHeader>
            <CCardBody class="card-body">
                <div style="height: calc(100% - 46px);display: flex;flex-direction: column">
                    <div style="display: flex;justify-content: space-around">
                        <div class="btnCSS" style="display: flex;width: 300px;height: 200px;justify-content: center;flex-direction:column;align-items: center;background-color: #ff5809;border-radius: 5px;color: white">
                            <Icon type="md-warning" class="iconWarn" />
                            <h3 style="margin: 10px 0">严重告警(次)</h3>
                            <h3>4</h3>
                        </div>
                        <div class="btnCSS" style="display: flex;width: 300px;height: 200px;justify-content: center;flex-direction:column;align-items: center;background-color: #f59a23;border-radius: 5px;color: white">
                            <Icon type="md-star" class="iconWarn" />
                            <h3>主要告警(次)</h3>
                            <span>4</span>
                        </div>
                        <div class="btnCSS" style="display: flex;width: 300px;height: 200px;justify-content: center;flex-direction:column;align-items: center;background-color: #73bf00;border-radius: 5px;color: white">
                            <Icon type="md-star-half" class="iconWarn" />
                            <h3>次要告警(次)</h3>
                            <span>4</span>
                        </div>
                    </div>
                    <div class="pie-tb-iscontent" style="margin: 10px 0">
                        <Row>
                            <!-- 告警分析 -->
                            <i-col :xs="24" :sm="24" :md="24" :lg="24">
                                <div class="echartsTitle">
                                    <i-col :xs="24" :sm="12" :md="12" :lg="12"> 告警分析 </i-col>
                                    <i-col :xs="24" :sm="12" :md="12" :lg="12" class="dateAlign">
                                        <RadioGroup
                                                v-model="date1"
                                                type="button"
                                                @on-change="changeDate"
                                        >
                                            <Radio label="今天">今天</Radio>
                                            <Radio label="七日">七日</Radio>
                                            <Radio label="全部">全部</Radio>
                                        </RadioGroup>
                                    </i-col>
                                </div>
                                <div id="Echarts1"></div>
                            </i-col>
                        </Row>
                    </div>
                    <!-- 告警占比 -->


                    <div class="pie-tb-iscontent">
                        <Row>
                            <i-col :xs="24" :sm="8" :md="8" :lg="8">
                                <div id="Echarts2"></div>
                            </i-col>
                            <i-col :xs="24" :sm="16" :md="16" :lg="16">
                                <div class="dateAlign">
                                    <RadioGroup
                                            v-model="date2"
                                            type="button"
                                            @on-change="changeDate"
                                    >
                                        <Radio label="今天">今天</Radio>
                                        <Radio label="七日">七日</Radio>
                                        <Radio label="全部">全部</Radio>
                                    </RadioGroup>
                                </div>
                                <Table :columns="columns1" :data="data1" border></Table>
                            </i-col>
                        </Row>
                    </div>
                    </div>

            </CCardBody>
        </CCard>
    </div>




</template>
<script>
    export default {
        name: "alarmStatistics",

        data() {
            return {
                date1: "今天",  //告警分析单选值
                date2: "今天",  //告警统计单选值
                //表头
                columns1: [
                    {
                        title: "告警等级",
                        key: "level",
                    },
                    {
                        title: "告警数量",
                        key: "num",
                    },
                    {
                        title: "占比",
                        key: "scale",
                    },
                ],
                //表格数据
                data1: [
                    {
                        level: "高级告警",
                        scale: 18,
                        num: "1415",
                    },
                    {
                        level: "中级告警",
                        scale: 24,
                        num: "12312",
                    },
                    {
                        level: "低级告警",
                        scale: 30,
                        num: "123123",
                    },
                ],
                // 测试数据
                data2: [
                    {
                        level: "高级告警",
                        scale: 20,
                        num: "141",
                    },
                    {
                        level: "中级告警",
                        scale: 20,
                        num: "1232",
                    },
                    {
                        level: "低级告警",
                        scale: 35,
                        num: "123123",
                    },
                ],
                data3: [
                    {
                        level: "高级告警",
                        scale: 10,
                        num: "1456",
                    },
                    {
                        level: "中级告警",
                        scale: 40,
                        num: "4562",
                    },
                    {
                        level: "低级告警",
                        scale: 50,
                        num: "1983",
                    },
                ],
                data4: [
                    {
                        level: "高级告警",
                        scale: 18,
                        num: "1415",
                    },
                    {
                        level: "中级告警",
                        scale: 24,
                        num: "12312",
                    },
                    {
                        level: "低级告警",
                        scale: 30,
                        num: "123123",
                    },
                ],

                option1: {
                    // title: {
                    //   text: "告警分析",
                    // },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        left: "5%",
                        right: "8%",
                        top: "30%",
                        containLabel: true,
                    },

                    legend: {
                        data: ["全部警告", "高级警告", "中级警告", "低级警告"],
                        left: "0",
                        top: "40",
                        textStyle: {
                            color: "#98dcff"
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                        },
                        iconStyle:{
                            color: "#fdfcfc"
                        }
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["12:01", "12:02", "12:03", "12:04", "12:05", "12:07", "12:08"],
                        axisLabel: { color: "#98dcff" },
                        axisLine: { color: "#98dcff" },
                    },
                    yAxis: {
                        type: "value",
                        min: "0",
                        max: "100",
                        splitNumber: 5,
                        axisLabel: { color: "#98dcff" },
                        axisLine: { color: "#98dcff" },
                    },
                    series: [
                        {
                            name: "全部警告",
                            type: "line",
                            data: [76, 76, 76, 77, 76, 75, 77],
                        },
                        {
                            name: "高级警告",
                            type: "line",
                            data: [60, 60, 64, 63, 62, 63, 65],
                        },
                        {
                            name: "中级警告",
                            type: "line",
                            data: [55, 56, 57, 56, 54, 56, 55],
                        },
                        {
                            name: "低级警告",
                            type: "line",
                            data: [28, 27, 29, 27, 28, 26, 27],
                        },
                    ],
                },

                // 测试数据
                option3: {
                    // title: {
                    //   text: "告警分析",
                    // },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        left: "5%",
                        right: "8%",
                        top: "30%",
                        containLabel: true,
                    },

                    legend: {
                        data: ["全部警告", "高级警告", "中级警告", "低级警告"],
                        left: "0",
                        top: "40",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["12:01", "12:02", "12:03", "12:04", "12:05", "12:07", "12:08"],
                    },
                    yAxis: {
                        type: "value",
                        min: "0",
                        max: "100",
                        splitNumber: 5,
                    },
                    series: [
                        {
                            name: "全部警告",
                            type: "line",
                            data: [0, 80, 76, 60, 50, 75, 0],
                        },
                        {
                            name: "高级警告",
                            type: "line",
                            data: [60, 60, 64, 63, 62, 63, 65],
                        },
                        {
                            name: "中级警告",
                            type: "line",
                            data: [50, 60, 50, 60, 50, 60, 50],
                        },
                        {
                            name: "低级警告",
                            type: "line",
                            data: [30, 20, 20, 30, 20, 30, 20],
                        },
                    ],
                },
                option5: {
                    // title: {
                    //   text: "告警分析",
                    // },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        left: "5%",
                        right: "8%",
                        top: "30%",
                        containLabel: true,
                    },

                    legend: {
                        data: ["全部警告", "高级警告", "中级警告", "低级警告"],
                        left: "0",
                        top: "40",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["12:01", "12:02", "12:03", "12:04", "12:05", "12:07", "12:08"],
                    },
                    yAxis: {
                        type: "value",
                        min: "0",
                        max: "100",
                        splitNumber: 5,
                    },
                    series: [
                        {
                            name: "全部警告",
                            type: "line",
                            data: [100, 50, 76, 77, 60, 75, 70],
                        },
                        {
                            name: "高级警告",
                            type: "line",
                            data: [60, 60, 64, 63, 62, 63, 65],
                        },
                        {
                            name: "中级警告",
                            type: "line",
                            data: [50, 48, 57, 66, 54, 48, 70],
                        },
                        {
                            name: "低级警告",
                            type: "line",
                            data: [20, 20, 20, 30, 30, 30, 30],
                        },
                    ],
                },
                option7: {
                    // title: {
                    //   text: "告警分析",
                    // },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        left: "5%",
                        right: "8%",
                        top: "30%",
                        containLabel: true,
                    },

                    legend: {
                        data: ["全部警告", "高级警告", "中级警告", "低级警告"],
                        left: "0",
                        top: "40",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["12:01", "12:02", "12:03", "12:04", "12:05", "12:07", "12:08"],
                    },
                    yAxis: {
                        type: "value",
                        min: "0",
                        max: "100",
                        splitNumber: 5,
                    },
                    series: [
                        {
                            name: "全部警告",
                            type: "line",
                            data: [76, 76, 76, 77, 76, 75, 77],
                        },
                        {
                            name: "高级警告",
                            type: "line",
                            data: [60, 60, 64, 63, 62, 63, 65],
                        },
                        {
                            name: "中级警告",
                            type: "line",
                            data: [55, 56, 57, 56, 54, 56, 55],
                        },
                        {
                            name: "低级警告",
                            type: "line",
                            data: [28, 27, 29, 27, 28, 26, 27],
                        },
                    ],
                },

                option2: {
                    title: {
                        text: "告警占比",
                        textStyle: {
                            color: "#98dcff",
                        },
                        // subtextStyle: {
                        //   color: "#fdfcfc",
                        // },
                    },
                    grid: {
                        left: "38%",
                        right: "3%",
                        // color: "#fdfcfc",
                        containLabel: true, //要生效必须设置为true
                    },
                    toolbox: {
                        //工具栏组件
                        show: true,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        top: "20%",
                        left: "0",
                        width: "100", // 图例组件的宽度
                        textStyle: {
                            color: "#98dcff",
                        },
                    },
                    series: [
                        {
                            name: "告警等级",
                            type: "pie",
                            radius: ["35%", "60%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "24",
                                    fontWeight: "bold",
                                    color: "#98dcff",
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                { value: 1048, name: "高级告警" },
                                { value: 735, name: "中级告警" },
                                { value: 580, name: "低级告警" },
                            ],
                        },
                    ],
                },

                // 测试数据
                option4: {
                    title: {
                        text: "告警占比",
                    },
                    grid: {
                        left: "20%",
                        right: "10%",

                        containLabel: true, //要生效必须设置为true
                    },
                    toolbox: {
                        //工具栏组件
                        show: true,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        top: "20%",
                        left: "0",
                        width: "100", // 图例组件的宽度
                    },
                    series: [
                        {
                            name: "告警等级",
                            type: "pie",
                            radius: ["35%", "60%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "24",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                { value: 1048, name: "高级告警" },
                                { value: 73, name: "中级告警" },
                                { value: 100, name: "低级告警" },
                            ],
                        },
                    ],
                },
                option6: {
                    title: {
                        text: "告警占比",
                    },
                    grid: {
                        left: "38%",
                        right: "3%",

                        containLabel: true, //要生效必须设置为true
                    },
                    toolbox: {
                        //工具栏组件
                        show: true,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        top: "20%",
                        left: "0",
                        width: "100", // 图例组件的宽度
                    },
                    series: [
                        {
                            name: "告警等级",
                            type: "pie",
                            radius: ["35%", "60%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "24",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                { value: 100, name: "高级告警" },
                                { value: 735, name: "中级告警" },
                                { value: 58, name: "低级告警" },
                            ],
                        },
                    ],
                },
                option8: {
                    title: {
                        text: "告警占比",
                    },
                    grid: {
                        left: "38%",
                        right: "3%",

                        containLabel: true, //要生效必须设置为true
                    },
                    toolbox: {
                        //工具栏组件
                        show: true,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        top: "20%",
                        left: "0",
                        width: "100", // 图例组件的宽度
                    },
                    series: [
                        {
                            name: "告警等级",
                            type: "pie",
                            radius: ["35%", "60%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "24",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                { value: 1048, name: "高级告警" },
                                { value: 735, name: "中级告警" },
                                { value: 580, name: "低级告警" },
                            ],
                        },
                    ],
                },
            };
        },
        watch: {
            date1(newName, oldName) {
            },

            date2(newName, oldName) {
            },
        },
        mounted() {
            // 创建页面，拉取echars数据
            this.echartsInit();
        },
        methods: {
            // echarts初始化
            echartsInit() {
                this.$nextTick(function () {
                    //告警分析
                    let EchartsContain1 = document.getElementById("Echarts1");
                    let Echarts1 = this.$echarts.init(EchartsContain1);
                    Echarts1.setOption(this.option1);
                    // 告警占比
                    let EchartsContain2 = document.getElementById("Echarts2");
                    let Echarts2 = this.$echarts.init(EchartsContain2);
                    Echarts2.setOption(this.option2);
                });
            },
            // 点击radio切换选项
            changeDate() {
                // let optionA=Object.assign({},this.option1);
                // let optionB=Object.assign({},this.option2);
                if (this.date1 == "今天") {
                    this.option1 = this.option7;
                    this.echartsInit();
                } else if (this.date1 == "七日") {
                    this.option1 = this.option3;
                    this.echartsInit();
                } else {
                    this.option1 = this.option5;
                    this.echartsInit();
                }
                if (this.date2 == "今天") {
                    this.option2 = this.option8;
                    this.data1 = this.data4;
                    this.echartsInit();
                } else if (this.date2 == "七日") {
                    this.option2 = this.option4;
                    this.data1 = this.data2;
                    this.echartsInit();
                } else {
                    this.option2 = this.option6;
                    this.data1 = this.data3;
                    this.echartsInit();
                }
            },
        },
    };
</script>
<style lang="less" scoped>

    .rightCard {
        width: 80%;
        flex: 1;
    }

    .leftCard {
        width: 18%;
    }
    /deep/.card {
        margin-bottom: 0;
    }
    .headerMar{
        margin-left: 10px;
    }

    /deep/.ivu-form-item{
        margin-bottom: 10px;
    }

    .row {
        display: flex;
        justify-content: center;
    }
    .flex-direction {
        flex-direction: row;
        padding: 10%;
    }
    .icon {
        text-align: center;
        img {
            width: 40px;
            height: auto;
        }
    }
    .cardText {
        margin: 20px;
        h3 {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }
        span {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fff;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }
    }
    .seriousWarn {
        background: #ff5809;
    }
    .mainWarn {
        background: #f59a23;
    }
    .secondaryWarn {
        background: #73bf00;
    }
    #Echarts1,
    #Echarts2 {
        height: 400px;
        width: 100%;
    }
    #Echarts2 {
        height: 300px;
    }
    /deep/ .ivu-col-span-lg-6 {
        display: block;
    }
    /deep/ .ivu-col-span-lg-12 {
        width: 28%;
    }
    /deep/ .ivu-table-wrapper {
        margin-top: 40px;
    }
    .echartsTitle {
        height: 50px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        padding: 20px 0;

    }
    .cardTitle {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #fdfcfc;
        text-align: left;
        margin-bottom: 20px;
        height: 25px;
        //  font-size: @main-font-size;

    }
    .dateAlign {
        text-align: end;
        // color: @main-font-color;
    }
    .pie-tb-iscontent{
        box-shadow: inset 0px 0px 3px 1px  var(--label-font-color, #5d8bc4);
        padding: 10px;
    }
    .iconWarn {
        font-size: 40px;
        color: #fff;
    }
    /deep/ .ivu-table-header thead tr th {
        text-align: center;
    }
    /deep/ .ivu-table-cell {
        text-align: center;
    }


    @keyframes rotate {
        0% {
            box-shadow: 0px 0px 3px 3px  white;
        }

        100%{
            box-shadow: 0px 0px 3px 3px  #5d8bc4;
        }
    }
    .btnCSS {
        animation-name: rotate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }



</style>

